<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 显示省 -->
    <select id="province">
        <option>选择省份</option>
        <option>湖北省</option>
        <option>湖南省</option>
        <option>山东省</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市区</option>
    </select>
    <select  id="small">选择区</select>
    <script>
        var city = document.querySelector("#city")
        // 1、省市地区二级联动，页面加载完毕后显示出可以选择的省份，当省改变显示省份对应的市
        // 2、实现省市区三级联动(可选)
        document.querySelector("#province").onclick = function () {
            var value = document.querySelector("#province").value
            if (value == '湖北省') {
                city.innerHTML = `
                <option>武汉市</option>
                <option>黄石市</option>
                <option>襄阳市</option>
                <option>荆州市</option>
                <option>咸宁市</option>
                `
            }
            if(value == "山东省" ){
                city.innerHTML = `
                <option>青岛市</option>
                <option>东营市</option>
                <option>烟台市</option>
                `
            }
            if(value == "湖南省" ){
                city.innerHTML = `
                <option>株洲市</option>
                <option>衡阳市</option>
                <option>岳阳市</option>
                <option>张家界市</option>
                `
            }
        }
        city.onclick = function(){
            var value = document.querySelector("#city").value
            var small = document.querySelector("#small");
            if (value == '武汉市') {
                small.innerHTML = `
                <option>江夏区</option>
                <option>江汉区</option>
                <option>洪山区</option>
                `
            }
            if (value == '黄石市') {
                small.innerHTML = `
                <option>黄石港区</option>
                <option>下路区</option>
                <option>阳新县</option>
                <option>铁山区</option>
                `
            }
            if (value == '襄阳市') {
                small.innerHTML = `
                <option>襄州区</option>
                <option>樊城区</option>
                <option>襄城区</option>
                `
            }
            if (value == '荆州市') {
                small.innerHTML = `
                <option>荆州区</option>
                <option>沙市区</option>
                `
            }
            if (value == '咸宁市') {
                small.innerHTML = `
                <option>通山区</option>
                <option>崇阳县</option>
                <option>温泉开发区</option>
                <option>咸安区</option>
                `
            }
            if(value == "青岛市" ){
                small.innerHTML = `
                <option>四方区</option>
                <option>黄岛区</option>
                <option>城阳区</option>
                `
            }
            if(value == "东营市" ){
                small.innerHTML = `
                <option>东营区</option>
                <option>河口区</option>
                <option>垦利区</option>
                `
            }
            if(value == "烟台市" ){
                small.innerHTML = `
                <option>福山区</option>
                <option>莱山区</option>
                <option>牟平区</option>
                `
            }
            if(value == "张家界市" ){
                small.innerHTML = `
                <option>永定区</option>
                <option>武陵源区</option>
                `
            }
            if(value == "株洲市" ){
                small.innerHTML = `
                <option>天元市</option>
                <option>荷塘市</option>
                <option>石峰市</option>
                <option>芦淞市</option>
                `
            }
            if(value == "衡阳市" ){
                small.innerHTML = `
                <option>:雁峰区</option>
                <option>石鼓区</option>
                <option>珠晖区</option>
                <option>蒸湘区</option>
                `
            }
            if(value == "岳阳市" ){
                small.innerHTML = `
                <option>云溪区</option>
                <option>平江县</option>
                <option>岳阳县</option>
                <option>君山区</option>
                `
            }
        }
    </script>
</body>

</html>